// 筛选按钮组组件

import React from 'react';
import styles from './FilterButtons.module.css';

/**
 * 筛选按钮组件的属性接口
 */
interface FilterButtonsProps {
  /** 当前选中的筛选类型 */
  activeFilter: string;
  /** 筛选选项配置 */
  options: {
    value: string;
    label: string;
  }[];
  /** 筛选变化回调函数 */
  onChange: (value: string) => void;
  /** 是否禁用按钮 */
  disabled?: boolean;
  /** 按钮组的数据属性，用于样式控制 */
  dataActive?: string;
  /** 自定义类名 */
  className?: string;
}

/**
 * 筛选按钮组组件
 * 提供统一的筛选按钮样式和交互逻辑
 */
const FilterButtons: React.FC<FilterButtonsProps> = ({
  activeFilter,
  options,
  onChange,
  disabled = false,
  dataActive,
  className = ''
}) => {
  /**
   * 处理按钮点击事件
   * @param value 筛选值
   */
  const handleClick = (value: string) => {
    if (disabled) return;
    onChange(value);
  };

  return (
    <div 
      className={`${styles.filterGroup} ${className}`}
      data-active={dataActive || activeFilter}
    >
      {options.map((option) => (
        <button
          key={option.value}
          className={`${styles.filterBtn} ${activeFilter === option.value ? styles.active : ''}`}
          onClick={() => handleClick(option.value)}
          disabled={disabled}
          type="button"
        >
          {option.label}
        </button>
      ))}
    </div>
  );
};

export default FilterButtons;